/* eslint-disable react-hooks/exhaustive-deps */
import { View, Image, Canvas, CoverImage, CoverView } from '@tarojs/components';
import Taro from '@tarojs/taro';
import { useEffect } from 'react';
import drawQrcode from 'weapp-qrcode';
import invalidIcon from '@/assets/images/order/invalid.png';
import './index.scss';

interface IProps {
  content: string;
  invalid?: boolean;
  orderType: number;
}

export default function ({ content, invalid = false, orderType }: IProps) {
  const initQRCode = async () => {
    // 设置屏幕比例
    const res = await Taro.getSystemInfo();
    const scale = res.screenWidth / 375;
    // 描绘二维码
    drawQrcode({
      width: 200 * scale,
      height: 200 * scale,
      canvasId: 'myQrcode',
      text: content,
    });
  };
  useEffect(() => {
    initQRCode();
  }, []);
  return (
    <View className="qrcode-container section-block">
      <Canvas className="scan-code" canvasId="myQrcode" />
      自提码：{content}
      {invalid && (
        <CoverView className="invalid-mask">
          {orderType === 1 && <CoverImage className="cover-image" src={invalidIcon} />}
        </CoverView>
      )}
    </View>
  );
}
